<template>
  <div class="image-uploads">
    <img 
      v-if="imageUrl" 
      :src="imageUrl" 
      alt="Uploaded Image" 
      style="max-width: 100%;"
    />
    <el-icon v-else :style="{ fontSize: '50px' }"><picture-filled :style="{ fontSize: '50px' }" /></el-icon>
   
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, watch } from 'vue';
import { listByIds, delOss } from '@/api/system/oss'; // 假设你有一个 API 用于获取图片

// 定义 props
const props = defineProps<{
  photoUrl: string; // photoUrl 是一个字符串
  
}>();

const imageUrl = ref<string>(''); // 用于存储图片 URL

// 使用 watch 监听 photoUrl 的变化
watch(
  () => props.photoUrl,
  async (newPhotoUrl) => {
    if (newPhotoUrl) {
      try {
        // 调用 API 获取图片，假设你的 API 需要 photoUrl 和 limit 作为参数
        const response = await listByIds(props.photoUrl);
        console.log(response,"1111111111111");
        imageUrl.value = response.data[0].url; // 假设 API 返回的数据结构中有 imageUrl
      } catch (error) {
        console.error('Error fetching image:', error);
      }
    } else {
      imageUrl.value = ''; // 如果没有 photoUrl，清空 imageUrl
    }
  },
  { immediate: true } // 立即执行一次
);
</script>

<style scoped>
.image-uploads {
  /* 添加一些样式 */
}
.img-item{
  width: 50px;
  height: 50px;
}
</style>